<template>
  <div class="_wz_cent_main _wz_positioningTrajectory">
    <div class="_wz_positioningTrajectory_left">
      <Card dis-hover :bordered="true">
        <p slot="title">搜索</p>
        <Form ref="trackData" :model="trackData" label-position="right" :label-width="80" :rules="trackDataValidate">
          <FormItem label="车辆选择" prop="carPlateNo">
            <i-select v-model="trackData.carPlateNo" filterable placeholder="请选择车辆" clearable>
              <Option v-for="item in carList" :value="item.carPlateNo" :key="item.uuid">{{ item.carPlateNo }}</Option>
            </i-select>
          </FormItem>
          <FormItem label="区间选择" prop="Interval">
            <i-select v-model="trackData.Interval" filterable placeholder="请选择时间区间" @on-change="timeInterval" clearable>
              <Option value="1">自定义</Option>
              <Option value="2">1天</Option>
              <Option value="3">3天</Option>
              <Option value="4">7天</Option>
            </i-select>
          </FormItem>
          <FormItem label="开始时间" prop="newStartTime">
            <DatePicker type="datetime" placeholder="请选择开始时间" split-panels :options="startTime" style="width: 100%;" v-model="trackData.newStartTime" @on-change="startTimeFun"></DatePicker>
          </FormItem>
          <FormItem label="结束时间" prop="newEndTime">
            <DatePicker type="datetime" placeholder="请选择结束时间" split-panels :options="endTime" v-model="trackData.newEndTime" style="width: 100%" @on-change="endTimeFun"></DatePicker>
          </FormItem>
          <FormItem style="margin:0;">
            <Button type="primary" @click="trackFun">搜索</Button>
          </FormItem>
        </Form>
      </Card>
      <Card dis-hover :bordered="true" style="margin: 10px 0 0 0;height: calc(100% - 360px);" class="_wz_movementTrack">
        <p slot="title">行驶轨迹</p>
        <div style="height: 100%;">
          <div style="border-bottom: 1px solid #eee;background: #f2f2f2;height: 30px;box-sizing: border-box;border-top: 1px solid #eeeeee;border-left: 1px solid #eee;">
            <div style="float: left;width: 60px;text-align: center;height: 30px;line-height: 30px;padding: 0 10px;border-right: 1px solid #eee;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">序号</div>
            <div style="float: left;width: 171px;height: 30px;line-height: 30px;padding: 0 10px;border-right: 1px solid #eee;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">时间</div>
            <div style="float: left;width: 60px;height: 30px;line-height: 30px;padding: 0 10px;border-right: 1px solid #eee;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">速度</div>
            <div style="float: left;width: calc(100% - 60px - 171px - 60px);height: 30px;line-height: 30px;padding: 0 10px;border-right: 1px solid #eee;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">方向</div>
          </div>
          <div v-if="positioningData.length == 0" style="display: flex;flex-wrap: wrap;align-content: center;justify-content: center;width: 100%;height: calc(100% - 33px);">暂无数据</div>
          <div v-else class="_wz_map_posi_list" ref="posiList">
            <template v-for="item,index in positioningData">
              <div class="_wz_map_posi_list_row"  :class="(positioningindex - 1) == index?'_wz_map_list_select':''" @click="clickList(index)">
                <div style="width: 60px;text-align: center;float: left;">{{ index+1 }}</div>
                <div style="width: 171px;float: left;"> {{item.dateTime}}</div>
                <div style="width: 60px;float: left;">{{item.vec1}}</div>
                <div style="width: calc(100% - 60px - 171px - 60px);float: left;">
                  <template v-if=" parseInt((item.direction < 0 ? 0 : item.direction >= 359 ? 360 : item.direction)/45) == 0 || parseInt((item.direction < 0 ? 0 : item.direction >= 359 ? 360 : item.direction)/45) > 7">
                    <img class="_wz_fromHereOn" src="../../../assets/icon_top.png"/><!--正北-->
                  </template>
                  <template v-if=" parseInt((item.direction < 0 ? 0 : item.direction >= 359 ? 360 : item.direction)/45) == 1">
                    <img class="_wz_fromHereOn" src="../../../assets/icon_top_right.png"/><!--东北-->
                  </template>
                  <template v-if=" parseInt((item.direction < 0 ? 0 : item.direction >= 359 ? 360 : item.direction)/45) == 2">
                    <img class="_wz_fromHereOn" src="../../../assets/icon_right.png"/><!--正东-->
                  </template>
                  <template v-if=" parseInt((item.direction < 0 ? 0 : item.direction >= 359 ? 360 : item.direction)/45) == 3">
                    <img class="_wz_fromHereOn" src="../../../assets/icon_right_buttom.png"/><!--东南-->
                  </template>
                  <template v-if=" parseInt((item.direction < 0 ? 0 : item.direction >= 359 ? 360 : item.direction)/45) == 4">
                    <img class="_wz_fromHereOn" src="../../../assets/icon_buttom.png"/><!--正南-->
                  </template>
                  <template v-if=" parseInt((item.direction < 0 ? 0 : item.direction >= 359 ? 360 : item.direction)/45) == 5">
                    <img class="_wz_fromHereOn" src="../../../assets/icon_buttom_left.png"/><!--西南-->
                  </template>
                  <template v-if=" parseInt((item.direction < 0 ? 0 : item.direction >= 359 ? 360 : item.direction)/45) == 6">
                    <img class="_wz_fromHereOn" src="../../../assets/icon_left.png"/><!--正西-->
                  </template>
                  <template v-if=" parseInt((item.direction < 0 ? 0 : item.direction >= 359 ? 360 : item.direction)/45) == 7">
                    <img class="_wz_fromHereOn" src="../../../assets/icon_left_top.png"/><!--西北-->
                  </template>
                </div>
              </div>
            </template>
          </div>
        </div>
      </Card>
    </div>
    <div class="_wz_positioningTrajectory_right">
      <div class="baidumap" id="_wz_vehicleMonitoring_allmap1"></div>

      <div style="position: absolute;width: 100%;bottom: 0px;left: 0px;background: rgba(0,0,0,0.8);padding: 10px;box-sizing:border-box;">
        <div style="float: left;">
          <div style="margin: 0 0 20px;">
            <Button type="info" size="small" @click="startPlaying">开始播放</Button>
            <Button type="warning" size="small" @click="suspended">暂停播放</Button>
            <Button type="error" size="small" @click="carTrackStop">停止播放</Button>
          </div>
          <div>
            <Button :type="wzTimer == 1?'success':'warning'" size="small" @click="wzTimer = 1">快速</Button>
            <Button :type="wzTimer == 250?'success':'warning'" size="small" @click="wzTimer = 250">中速</Button>
            <Button :type="wzTimer == 500?'success':'warning'" size="small" @click="wzTimer = 500">慢速</Button>
          </div>
        </div>
        <div style="float: right;color: #fff;max-width: calc(100% - 230px);min-width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
          <div>
            <div style="display: inline-block;height: 35px;">
              <label style="width: 90px;float: left;display: block;font-weight: 400;line-height: 20px;text-align: right;padding: 9px 15px;">开始时间</label>
              <div style="float: left;padding: 9px 5px; line-height: 20px;min-height: 20px;">
                {{ !!addressTime.wzKssj ? addressTime.wzKssj : '--' }}
              </div>
            </div>
            <div style="display: inline-block;height: 35px;">
              <label style="width: 90px;float: left;display: block;font-weight: 400;line-height: 20px;text-align: right;padding: 9px 15px;">开始地点</label>
              <div style="float: left;padding: 9px 5px; line-height: 20px;min-height: 20px;max-width:300px;min-width:100px;">
                <Poptip trigger="hover" :content="!!addressTime.wzKsdd ? addressTime.wzKsdd : '--'">
                  <div style="width: 100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;max-width: 300px;min-width: 100px;">
                    {{ !!addressTime.wzKsdd ? addressTime.wzKsdd : '--' }}
                  </div>
                </Poptip>
              </div>
            </div>
          </div>
          <div>
            <div style="display: inline-block;height: 35px;">
              <label style="width: 90px;float: left;display: block;font-weight: 400;line-height: 20px;text-align: right;padding: 9px 15px;">结束时间</label>
              <div style="float: left;padding: 9px 5px; line-height: 20px;min-height: 20px;">
                {{ !!addressTime.wzJssj ? addressTime.wzJssj : '--' }}
              </div>
            </div>
            <div style="display: inline-block;height: 35px;">
              <label style="width: 90px;float: left;display: block;font-weight: 400;line-height: 20px;text-align: right;padding: 9px 15px;">结束地点</label>
              <div style="float: left;padding: 9px 5px; line-height: 20px;min-height: 20px;max-width:300px;min-width:100px;">
                <Poptip trigger="hover" :content="!!addressTime.wzJsdd ? addressTime.wzJsdd : '--'">
                  <div style="width: 100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;max-width: 300px;min-width: 100px;">
                    {{ !!addressTime.wzJsdd ? addressTime.wzJsdd : '--' }}
                  </div>
                </Poptip>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>

export default {
  props: ['vehicleData'],//接收来自父组件的数据
  data() {
    return {
      positioningData: [],//定位数据
      positioningindex: 0,//定位坐标
      pointCoordinates: null,//记录上一个点
      timingMethod: null,//定时
      wzTimer: 250,
      statePlay: false,//播放状态
      addressTime: {
        wzKssj: null,
        wzKsdd: null,
        wzJssj: null,
        wzJsdd: null
      },
      carList: [],//车List
      startTime: {},//轨迹开始时间
      endTime: {},//轨迹结束时间
      spinShow: false,//本页加载
      map: null,
      positionTrajectory: [],
      //轨迹  验证
      trackDataValidate: {
        carPlateNo: [
          {required: true, message: '请选择车辆', trigger: 'blur'}
        ],
        Interval: [
          {required: true, message: '请选择时间区间', trigger: 'blur'}
        ],
        newStartTime: [
          {type: "date", required: true, message: '请选择轨迹开始时间', trigger: 'blur'},
        ],
        newEndTime: [
          {type: "date", required: true, message: '请选择轨迹结束时间', trigger: 'blur'},
        ],
      },
      trackData: {
        carPlateNo:!!this.vehicleData ? this.vehicleData.carPlateNo:'',
        Interval:!!this.vehicleData ? "2":'',
        newStartTime: !!this.vehicleData ? new Date(this.public.timeFormatting(new Date(), "yyyy-MM-dd") + ' 00:00:00'):'',
        newEndTime: !!this.vehicleData ? new Date(this.public.timeFormatting(new Date(), "yyyy-MM-dd") + ' 23:59:59'):'',

        // Interval: "2",//1 自定义		2 1天		3 3天		4 7天
        // newStartTime: new Date(this.public.timeFormatting(new Date(), "yyyy-MM-dd") + ' 00:00:00'),
        // newEndTime: new Date(this.public.timeFormatting(new Date(), "yyyy-MM-dd") + ' 23:59:59'),
      },//轨迹搜索条件
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;
    that.mapLoad();

    //车List
    that.axios.post(that.apiUrl.webApi + "/core/vehicle/coreVehicleList", {}).then(res => {
      that.tableLoading = false;
      if (!!res) {
        that.carList = res.data.data;
      }
    }).catch(err => {
      console.log('失败', err);
    })
  },
  methods: {//执行的方法
    //轨迹开始时间
    startTimeFun(startTime, type) {
      let that = this;
      that.endTime = {
        disabledDate(endTime) {
          return endTime < new Date(startTime) //|| endTime > Date.now()
        }
      }
    },
    //轨迹结束时间
    endTimeFun(endTime, type) {
      let that = this;
      that.startTime = {
        disabledDate(startTime) {
          return startTime > new Date(endTime) //|| startTime > Date.now()
        }
      }
    },
    //时间区间
    timeInterval(e) {
      let that = this;
      if (e == "1") { // 1 自定义
        that.trackData.newStartTime = '';
        that.trackData.newEndTime = '';
      }

      if (e == "2") {//2 1天
        that.trackData.newStartTime = new Date(that.public.timeFormatting(new Date(), "yyyy-MM-dd") + ' 00:00:00');
        that.trackData.newEndTime = new Date(that.public.timeFormatting(new Date(), "yyyy-MM-dd") + ' 23:59:59');
      }

      if (e == "3") {//3 3天
        that.trackData.newStartTime = new Date(that.public.timeFormatting(new Date(new Date().getTime() - 3 * 1000 * 60 * 60 * 24), "yyyy-MM-dd") + ' 00:00:00');
        that.trackData.newEndTime = new Date(that.public.timeFormatting(new Date(), "yyyy-MM-dd") + ' 23:59:59');
      }

      if (e == "4") {//4 7天
        that.trackData.newStartTime = new Date(that.public.timeFormatting(new Date(new Date().getTime() - 7 * 1000 * 60 * 60 * 24), "yyyy-MM-dd") + ' 00:00:00');
        that.trackData.newEndTime = new Date(that.public.timeFormatting(new Date(), "yyyy-MM-dd") + ' 23:59:59');
      }
    },
    //地图加载
    mapLoad() {
      let that = this;
      that.map = new BMap.Map("_wz_vehicleMonitoring_allmap1");    // 创建Map实例
      that.map.centerAndZoom(new BMap.Point(105.058886,36.028623), 4);  // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件
      that.map.addControl(new BMap.MapTypeControl({
        mapTypes: [
          BMAP_NORMAL_MAP,
          BMAP_HYBRID_MAP
        ]
      }));
      that.map.setCurrentCity("邢台");          // 设置地图显示的城市 此项是必须设置的
      that.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      // 左上角，添加比例尺
      let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
      that.map.addControl(top_left_control);
      //左上角，添加默认缩放平移控件
      let top_left_navigation = new BMap.NavigationControl();
      that.map.addControl(top_left_navigation);
    },
    //搜索轨迹
    trackFun() {
      let that = this;
      that.$refs['trackData'].validate((valid) => {
        if (valid) {
          that.removeTiming();
          //newStartTime
          //开始时间
          that.trackData.startTime = that.public.timeFormatting(that.trackData.newStartTime, "yyyy-MM-dd hh:mm:ss");
          //newEndTime
          //结束时间
          that.trackData.endTime = that.public.timeFormatting(that.trackData.newEndTime, "yyyy-MM-dd hh:mm:ss");

          that.trackData.internetState = 1;
          that.addressTime = {
            wzKssj: null,
            wzKsdd: null,
            wzJssj: null,
            wzJsdd: null
          };
          if(!!that.$refs.posiList){
            that.$refs.posiList.scrollTop = 0;
          }


          that.positioningData = [];//定位数据
          that.positioningindex = 0;//定位坐标
          that.pointCoordinates = null;//记录上一个点
          that.timingMethod = null;//定时
          that.statePlay = false;//播放状态





          that.spinShow = true;
          that.axios.post(that.apiUrl.positionTrajectory, that.trackData).then(res => {
            that.spinShow = false;
            if (!!res) {
              that.positioningData = !!res.data.data?res.data.data:[];//轨迹数据全局化
              that.positionTrajectory = !!res.data.data?res.data.data:[];
              if (!!that.positionTrajectory && that.positionTrajectory.length > 0) {
                that.trajectoryLoad()


                ///////轨迹
              } else {
                that.$Message.error('暂未获得到该车辆的轨迹');
              }
            }
          }).catch(err => {
            console.log('失败', err);
          })
        } else {
          that.$Message.error('请正确填写表单');
        }
      })
    },
    //清除地图
    removeOverlay() {
      this.map.clearOverlays();
    },
    //轨迹
    trajectoryLoad() {
      var that = this;
      let line = [];
      that.removeOverlay();//清除地图
      that.positionTrajectory.forEach(function (k, i) {
        let marker;
        if (i == 0) {//起点
          let myIcon = new BMap.Icon("../../static/img/vehicleImg/start.png", new BMap.Size(28, 32));
          marker = new BMap.Marker(new BMap.Point(k.lonX, k.latY), {icon: myIcon});  // 创建标注
          marker.setZIndex(999999);
          that.map.addOverlay(marker);            //增加点


          let location = {
            carPlateNo:k.carPlateNo,
            lon:k.lonX,
            lat:k.latY,
            type:6,
            positionType:1,
            data:k
          }

          //获取地理位置
          that.geographicalPosition(location,marker);



        } else if ((i + 1) == that.positionTrajectory.length) {//终点
          let myIcon = new BMap.Icon("../../static/img/vehicleImg/End.png", new BMap.Size(28, 32));
          marker = new BMap.Marker(new BMap.Point(k.lonX, k.latY), {icon: myIcon});  // 创建标注
          marker.setZIndex(999999);
          that.map.addOverlay(marker);            //增加点

          let location = {
            carPlateNo:k.carPlateNo,
            lon:k.lonX,
            lat:k.latY,
            type:6,
            positionType:2,
            data:k
          }

          //获取地理位置
          that.geographicalPosition(location,marker);

          // var geoc = new BMap.Geocoder();
          // geoc.getLocation(new BMap.Point(k.lonX, k.latY), function (rs) {
          //   that.addressTime.wzJssj = k.dateTime;
          //   that.addressTime.wzJsdd = rs.address;
          //
          //   // 石家庄客户说 信息添加到 图标上面
          //
          //
          //   var data = k;
          //   var html = '<div style=\'background:#FFFFFF;color:#000000;font-weight:normal;padding: 1px;border:solid  1px #ccc;padding: 10px;\'>' +
          //   // var html = '<div>' +
          //     '<div>车牌号：' + data.carPlateNo + '</div>' +
          //     '<div>行驶速度：' + data.vec1 + ' / ' + data.vec2 + '</div>' +
          //     '<div>总里程数：' + data.vec3 + '公里</div>' +
          //     '<div>行驶状态： ' + ((data.state >> 0 & 1) ? '启动' : '熄火') + ((data.state >> 1 & 1) ? ' - 定位' : ' - 未定位') + '</div>' +
          //     '<div>报警状态： ' + ((data.alarm >> 1 & 1) ? '超速报警' : "无超速") + ((data.alarm >> 2 & 1) ? '-疲劳报警' : " - 无疲劳") + '</div>' +
          //     '<div>定位时间：' + data.dateTime + '</div>' +
          //     '<div>定位地点：' + rs.address + '</div>' +
          //     '</div>';
          //
          //   // var infoWindow = new BMap.InfoWindow(html);  // 创建信息窗口对象
          //   // var point = new BMap.Point(k.lonX, k.latY);
          //   // marker.addEventListener("click", function(){
          //   //   that.map.openInfoWindow(infoWindow, point); //开启信息窗口
          //   // });
          //
          //
          //   var BaiMakerLabel = new BMap.Label(html, {offset: new BMap.Size(22, -3)});
          //   BaiMakerLabel.setStyle({border: 'none', padding: '3px 5px', background: 'none'});
          //   marker.setLabel(BaiMakerLabel);
          //   that.map.addOverlay(marker);//增加点
          // })

        }
        line.push(new BMap.Point(k.lonX, k.latY));//线连接点


      })
      let polyline = new BMap.Polyline(line, {
        strokeWeight: '6',//折线的宽度，以像素为单位
        strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
        strokeColor: "#18a45b" //折线颜色
      });   //
      that.map.addOverlay(polyline);          //增加折线
      that.map.setViewport(line);
    },
    //获取地理位置
    geographicalPosition(obj,marker){
      let that = this;
      var data = obj.data;

      that.axios.post(that.apiUrl.webApi + "/position/positionAddress", obj).then(res => {
        if (!!res) {
          // if(!true){

          if(obj.positionType == 1){//1 开始  0  结束
            that.addressTime.wzKssj = data.dateTime;
            that.addressTime.wzKsdd = res.data.data;
          }else{
            that.addressTime.wzJssj = data.dateTime;
            that.addressTime.wzJsdd = res.data.data;
          }
          // 石家庄客户说 信息添加到 图标上面
          var html = '<div style=\'background:#FFFFFF;color:#000000;font-weight:normal;padding: 1px;border:solid  1px #ccc;padding: 10px;\'>' +
            // var html = '<div>' +
            '<div>车牌号：' + data.carPlateNo + '</div>' +
            '<div>行驶速度：' + data.vec1 + ' / ' + data.vec2 + '</div>' +
            '<div>总里程数：' + data.vec3 + '公里</div>' +
            '<div>行驶状态： ' + ((data.state >> 0 & 1) ? '启动' : '熄火') + ((data.state >> 1 & 1) ? ' - 定位' : ' - 未定位') + '</div>' +
            '<div>报警状态： ' + ((data.alarm >> 1 & 1) ? '超速报警' : "无超速") + ((data.alarm >> 2 & 1) ? '-疲劳报警' : " - 无疲劳") + '</div>' +
            '<div>定位时间：' + data.dateTime + '</div>' +
            '<div style="white-space: break-spaces;word-break: break-all;">定位地点：' + res.data.data; + '</div>' +
            '</div>';
          // var infoWindow = new BMap.InfoWindow(html);  // 创建信息窗口对象
          // var point = new BMap.Point(k.lonX, k.latY);
          // marker.addEventListener("click", function(){
          //   that.map.openInfoWindow(infoWindow, point); //开启信息窗口
          // });
          var BaiMakerLabel = new BMap.Label(html, {offset: new BMap.Size(22, -3)});
          BaiMakerLabel.setStyle({border: 'none', padding: '3px 5px', background: 'none',width:'300px'});
          marker.setLabel(BaiMakerLabel);
          that.map.addOverlay(marker);//增加点



          // }
          // else{
          //   var geoc = new BMap.Geocoder();
          //   geoc.getLocation(new BMap.Point(data.lonX, data.latY), function (rs) {
          //     if(obj.positionType == 1){//1 开始  0  结束
          //       that.addressTime.wzKssj = data.dateTime;
          //       that.addressTime.wzKsdd = rs.address;
          //     }else{
          //       that.addressTime.wzJssj = data.dateTime;
          //       that.addressTime.wzJsdd = rs.address;
          //     }
          //     // 石家庄客户说 信息添加到 图标上面
          //     var data = k;
          //     var html = '<div style=\'background:#FFFFFF;color:#000000;font-weight:normal;padding: 1px;border:solid  1px #ccc;padding: 10px;\'>' +
          //       // var html = '<div>' +
          //       '<div>车牌号：' + data.carPlateNo + '</div>' +
          //       '<div>行驶速度：' + data.vec1 + ' / ' + data.vec2 + '</div>' +
          //       '<div>总里程数：' + data.vec3 + '公里</div>' +
          //       '<div>行驶状态： ' + ((data.state >> 0 & 1) ? '启动' : '熄火') + ((data.state >> 1 & 1) ? ' - 定位' : ' - 未定位') + '</div>' +
          //       '<div>报警状态： ' + ((data.alarm >> 1 & 1) ? '超速报警' : "无超速") + ((data.alarm >> 2 & 1) ? '-疲劳报警' : " - 无疲劳") + '</div>' +
          //       '<div>定位时间：' + data.dateTime + '</div>' +
          //       '<div>定位地点：' + rs.address + '</div>' +
          //       '</div>';
          //     // var infoWindow = new BMap.InfoWindow(html);  // 创建信息窗口对象
          //     // var point = new BMap.Point(k.lonX, k.latY);
          //     // marker.addEventListener("click", function(){
          //     //   that.map.openInfoWindow(infoWindow, point); //开启信息窗口
          //     // });
          //     var BaiMakerLabel = new BMap.Label(html, {offset: new BMap.Size(22, -3)});
          //     BaiMakerLabel.setStyle({border: 'none', padding: '3px 5px', background: 'none'});
          //     marker.setLabel(BaiMakerLabel);
          //     that.map.addOverlay(marker);//增加点
          //
          //   })
          // }
        }
      }).catch(err => {
        console.log('失败', err);
      })

    },
    //播放
    startPlaying() {
      var that = this;
      that.statePlay = false;
      if (that.positioningData.length == 0) {
        that.$Message.error('未查询到轨迹');
        return ;
      }
      if (that.positioningindex == that.positioningData.length) {
        that.positioningindex = 0
      }
      that.trajectoryPlayback()
    },
    //轨迹播放
    trajectoryPlayback() {
      var that = this;
      that.statePlay = true;
      that.removeTiming();
      that.timingMethod = setInterval(function () {
        that.removeTiming();
        if (that.positioningindex < that.positioningData.length) {
          that.mapAdd();
          that.trajectoryPlayback();
        } else {
          that.$Message.success('播放完毕');
          that.statePlay = false;
          that.removeTiming();
        }
      }, that.wzTimer)
    },
    //暂停
    suspended() {
      var that = this;
      that.statePlay = false;
      clearInterval(that.timingMethod);
    },
    //停止
    carTrackStop () {
      var that = this;
      that.statePlay = false;
      that.positioningindex = 0
      that.trajectoryLoad();
      clearInterval(that.timingMethod);
    },
    //清除
    removeTiming() {
      clearInterval(this.timingMethod);
    },
    //地图加点
    mapAdd(type) {
      var that = this;
      if (!!that.pointCoordinates) {//删除上一个
        that.map.removeOverlay(that.pointCoordinates);
      }
      let myIcon = new BMap.Icon("../../static/img/vehicleImg/b4.png", new BMap.Size(22, 22));
      that.pointCoordinates = new BMap.Marker(new BMap.Point(that.positioningData[that.positioningindex].lonX, that.positioningData[that.positioningindex].latY), {icon: myIcon});  // 创建标注
      that.pointCoordinates.setRotation(that.positioningData[that.positioningindex].direction);
      that.pointCoordinates.setZIndex(999999);
      var data = that.positioningData[that.positioningindex];
      var html = '<div style=\'background:#FFFFFF;color:#000000;font-weight:normal;padding: 1px;border:solid  1px #ccc\'>' +
        '<div>行驶速度：' + data.vec1 + ' / ' + data.vec2 + '</div>' +
        '<div>总里程数：' + data.vec3 + '公里</div>' +
        '<div>行驶状态： ' + ((data.state >> 0 & 1) ? '启动' : '熄火') + ((data.state >> 1 & 1) ? ' - 定位' : ' - 未定位') + '</div>' +
        '<div>报警状态： ' + ((data.alarm >> 1 & 1) ? '超速报警' : "无超速") + ((data.alarm >> 2 & 1) ? '-疲劳报警' : " - 无疲劳") + '</div>' +
        '<div>定位时间：' + data.dateTime + '</div>' +
        '</div>';
      var BaiMakerLabel = new BMap.Label(html, {offset: new BMap.Size(22, -3)});
      BaiMakerLabel.setStyle({border: 'none', padding: '3px 5px', background: 'none'});
      that.pointCoordinates.setLabel(BaiMakerLabel);
      that.map.addOverlay(that.pointCoordinates);//增加点
      if (!that.CheckPoiInMapBound(new BMap.Point(that.positioningData[that.positioningindex].lonX, that.positioningData[that.positioningindex].latY))) {
        that.map.setCenter(new BMap.Point(that.positioningData[that.positioningindex].lonX, that.positioningData[that.positioningindex].latY));
      }
      that.listScroll(type);
      that.positioningindex++;
    },
    //判断地图显示边界
    CheckPoiInMapBound(ThisLatlon) { //用于判断轨迹回放时经纬度是否超出地图可见区域，若超出则居中
      var that = this;
      var mapBounds = that.map.getBounds();
      if (mapBounds.containsPoint(ThisLatlon)) {
        return true;
      } else {
        return false;
      }
    },
    //列表滚动
    listScroll(type) {
      var that = this;
      if(!type){
        var scrollHeight = (that.positioningindex * 30);
        this.$refs.posiList.scrollTop = scrollHeight;
      }
    },
    //列表点击
    clickList(num){
      var that = this;
      that.trajectoryLoad()
      that.positioningindex = num;
      that.mapAdd(true)
    }

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态
    this.removeTiming();
  }
}
</script>
<style lang="less">
._wz_positioningTrajectory {
  width: 100%;
  height: 100%;

  ._wz_positioningTrajectory_left {
    width: 380px;
    height: 100%;
    float: left;
    background: #fff;
    ._wz_movementTrack{
      .ivu-card-body{
        height: calc(100% - 51px);
        ._wz_map_posi_list{
          width: 100%;
          height: calc(100% - 33px);
          overflow: auto;
          ._wz_map_posi_list_row{
            height: 30px;
            box-sizing: border-box;
            border-top: 1px solid #eeeeee;
            border-left: 1px solid #eee;

            div{
              height: 30px;
              line-height: 30px;
              padding: 0 10px;
              border-right: 1px solid #eee;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          ._wz_map_posi_list_row:last-child {
            div{
              border-bottom: 1px solid #eee;
            }
          }
        }
      }
    }
  }

  ._wz_positioningTrajectory_right {
    position: relative;;
    width: calc(100% - 380px - 10px);
    height: 100%;
    float: right;
    background: #fff;
    padding: 10px;

    .baidumap {
      width: 100%;
      height: 100%;
    }
  }
  ._wz_map_list_select {
    background: #afffd7;
  }
}


</style>
